<template>
    <el-container>
        <el-header class="headerSty" v-if="tabMode">
            <tab-views></tab-views>
        </el-header>
        <el-header class="headerSty" v-if="!tabMode">
        </el-header>
        <el-main class="body-main" v-if="tabMode && !isCachePage">
            <router-view v-if="isRouterAlive && cachePage.length > 0"></router-view>
        </el-main>
        <el-main class="body-main" v-if="tabMode && isCachePage">
            <keep-alive><router-view v-if="isRouterAlive && cachePage.length > 0"></router-view></keep-alive>
        </el-main>
        <el-main class="body-main" v-if="!tabMode">
            <router-view v-if="isRouterAlive"></router-view>
        </el-main>
        <modal-page/>
    </el-container>
</template>

<script>
import TabViews from './tab-views'
import { getSidebarMenu } from './sidebar'
import ModalPage from '../components/modal-page'
import KeepAlive from '../components/keep-alive'
export default {
  name: 'WRouterView',
  props: {
    tabMode: {
      type: Boolean,
      default: true
    },
    isCachePage: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      currentRoute: null,
      init: false,
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    getFirstRoute () {
      let currentRoute = null
      if (this.enableRole) {
        getSidebarMenu().some((item) => {
          if (item.role && this.$isInRoles(item.role)) {
            if (item.children) {
              item.children.some((c) => {
                if (this.$isInRoles(c.role)) {
                  currentRoute = c.index
                  return true
                }
              })
              if (currentRoute) return true
            } else {
              currentRoute = item.index
              return true
            }
          }
        })
      } else {
        getSidebarMenu().some((item) => {
          if (item.children) {
            item.children.some((c) => {
              if (c.index) {
                currentRoute = c.index
                return true
              }
            })
            if (currentRoute) return true
          } else {
            if (item.index) {
              currentRoute = item.index
              return true
            }
          }
        })
      }
      return currentRoute
    }
  },
  created () {
    if (this.tabMode) {
      this.$store.commit('TAB_VIEW_ENABLED', true)
    }
    let currentRoute = this.getFirstRoute()
    if (currentRoute) {
      this.$router.push('/' + currentRoute)
    } else {
      this.$router.push('/login')
      // this.$message({ type: 'warning', message: '无相关权限请联系管理员' })
    }
    // this.$bind('pageReload', () => {
    //   this.reload()
    // })
  },
  computed: {
    cachePage () {
      return this.$store.state.tabView.pages.map(item => item.name)
    },
    breadcrumb () {
      return this.$store.state.breadcrumb.breadcrumb
    }
  },
  components: { TabViews, ModalPage, KeepAlive }
}
</script>

<style >
    .header_breadcrumb{
        padding: 12px;

    }

    .header_breadcrumb .el-breadcrumb__inner{
        font-weight: normal !important;
        cursor: inherit !important;
        color: #606266 !important;
    }

    .headerSty{
      height: 41px !important;
      padding-left: 22px !important;
      background: white;
      z-index: 1;
    }

</style>
